// import { HTMLAttributes } from "react";

// interface CccProps extends HTMLAttributes<HTMLDivElement> {}
// function Ccc(props: CccProps) {
//   return <div>ccc</div>;
// }
// function App() {
//   return (
//     <div>
//       <Ccc onClick={(e) => {}}>
//         <button>7777</button>
//       </Ccc>
//     </div>
//   );
// }
// export default App;
//=================
// import { AnchorHTMLAttributes } from "react";

// interface CccProps extends AnchorHTMLAttributes<HTMLAnchorElement> {}
// function Ccc(props: CccProps) {
//   return <div>ccc</div>;
// }
// function App() {
//   return (
//     <div>
//       <Ccc href="">
//       </Ccc>
//     </div>
//   );
// }
// export default App;
//=================
// import { ComponentProps } from "react";

// interface CccProps extends ComponentProps<"a"> {}
// function Ccc(props: CccProps) {
//   return <div>ccc</div>;
// }
// function App() {
//   return (
//     <div>
//       <Ccc
//         onClick={(e) => {
//           console.log(e);
//         }}
//       ></Ccc>
//     </div>
//   );
// }
// export default App;
//=================
// import { MouseEventHandler } from "react";

// interface CccProps {
//   clickHandler: MouseEventHandler<HTMLDivElement>;
// }
// function Ccc(props: CccProps) {
//   return <div onClick={props.clickHandler}>ccc</div>;
// }
// function App() {
//   return (
//     <div>
//       <Ccc
//         clickHandler={(e) => {
//           console.log(e);
//         }}
//       ></Ccc>
//     </div>
//   );
// }
// export default App;
//====================
import { MouseEvent } from "react";

interface CccProps {
  clickHandler: (e: MouseEvent<HTMLDivElement>) => void;
}
function Ccc(props: CccProps) {
  return <div onClick={props.clickHandler}>ccc</div>;
}
function App() {
  return (
    <div>
      <Ccc
        clickHandler={(e) => {
          console.log(e);
        }}
      ></Ccc>
    </div>
  );
}
export default App;
